<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        visibility: hidden;
        /* visibility：hidden；让标签中的内容不显示，但是还占据位置
        display：none；让标签中的内容不显示，并且不会占据位置（审查元素时没有宽高） */
      }
    </style>
  </head>
  <body>
    <script>
      var str = "*";
      var n;
      while (true) {
        n = prompt("请输入菱形的高：(高为奇数)") * 1;
        //prompt接收的值将转化为 “string” 类型。
        //这里的 *1 代表：将字符串与数值类型进行算术运算
        //那么就会返回一个 “number” 类型的值给变量
        if (n % 2 == 0) {
          alert("输入不合理，请重新输入！");
        } else {
          break;
        }
      }
      for (var i = 1; i <= n; i++) {
        if (i <= (n + 1) / 2) {
          //  条件判断，先打印前一半菱形
          for (var k = 1; k <= (n + 1) / 2 - i; k++) {
            document.write("<span>" + str + "</span>");
          }
          for (var j = 1; j <= 2 * i - 1; j++) {
            document.write(str);
          }
          document.write("<br>");
        } else {
          //后一半菱形
          for (var j = 1; j <= i - (n + 1) / 2; j++) {
            document.write("<span>" + str + "</span>");
          }
          for (var a = 1; a <= n - 2 * (j - 1); a++) {
            document.write(str);
          }
          document.write("<br>");
        }
      }
    </script>
  </body>
</html>
